<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【作业】列表的增删和移动</title>
</head>
<body>
<form>
    <div class="list">
        <ul class="list-ul">
            <li class="list-option">
                <input type="text" name="list[]" class="list-input" value="PHP">
                <span>
                <span class="list-up" onclick="up()">[上移]</span>
                <span class="list-down" onclick="down()">[下移]</span>
                <span class="list-del" onclick="del()">[删除]</span>
                </span>
            </li>
            <li class="list-option">
                <input type="text" name="list[]" class="list-input" value="JavaScript">
                <span class="list-btn">
                    <span>
                    <span class="list-up" onclick="up()">[上移]</span>
                    <span class="list-down" onclick="down()">[下移]</span>
                    <span class="list-del" onclick="del()">[删除]</span>
                    </span>
                </span>
            </li>
        </ul>
    </div>
    <div class="list-bottom">
        <span class="list-add-show"><span>+添加项目</span></span>
        <div class="list-add-area list hide">
            添加到列表：
            <input class="list-add-input" type="text" name="list[]">
            <input class="list-add-add" type="button" value="添加">
            <input class="list-add-cancel" type="button" value="取消">
        </div>
    </div>
</form>
<script type="text/javascript">
    var list_up = document.getElementsByClassName("list-up");
    var list_down = document.getElementsByClassName("list-down");
    var list_del = document.getElementsByClassName("list-del");
    console.log(list_up)
    // for (let i = 0; i < list_up.length; i++) {
    //     var up = list_up.item(i);
    //     var down = list_down.item(i);
    //     var del = list_del.item(i);
    //
    //     function up() {
    //         var li = this.parentNode.parentNode;
    //         var li_up = li.previousSibling;
    //         li.parentNode.insertBefore(li, li_up);
    //     }
    //
    //     function down() {
    //         var li = this.parentNode.parentNode;
    //         li.parentNode.appendChild(li);
    //     }
    //
    //     function del() {
    //         var li = this.parentNode.parentNode;
    //         li.parentNode.removeChild(li);
    //     }
    // }


    // function up() {
    //     console.log("123")
    //     list=this.parentNode;
    //     console.log(list)
    //     listb=list.previousSibling
    //     console.log(listb)
    //     list.insertBefore(list,listb)
    // }
    // list_down.onclick=function () {
    //
    // }
    // list_del.onclick=function () {
    //
    // }
</script>
</body>
</html>